<template>
  <div>
    <el-table
      :data="List"
      stripe
      style="width: 100%"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="30"> </el-table-column>

      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="sex" label="性别" width="180"> </el-table-column>
      <el-table-column prop="tel" label="联系电话" width="180">
      </el-table-column>
      <el-table-column prop="province,value" label="地址">
        <template slot-scope="scope">
          {{ scope.row.value[0] }}{{ scope.row.value[1] }}{{ scope.row.value[2]
          }}{{ scope.row.address }}
        </template>
      </el-table-column>
      <el-table-column prop="action" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            type="warning"
            class="btnLeft"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            class="btnLeft"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row :gutter="20" class="footer">
      <el-button type="danger" class="btnLeft" @click="handleDeleteSelected"
        >批量删除</el-button
      >
    </el-row>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import bus from "@/utils/bus";
export default {
  data() {
    return {
      multipleSelection: [],
      // dialogTitle: "",
      // index: null,
    };
  },
  computed: {
    ...mapState({
      dialogFormVisible: (state) => state.dialog.dialogFormVisible,
      // form: (state) => state.dialog.form,
      // value: (state) => state.dialog.value,
    }),
  },
  props: ["List"],
  methods: {
    ...mapMutations([
      "listAll",
      // "Adetermine",
      "openDialogstate",
      // "editValue",
      // "editForm",
      "editIndex",
      "deleteIndexList",
      "deleteSelectedMultiple",
    ]),
    //把选中状态添加到指定数组
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //删除选中
    handleDeleteSelected() {
      this.$confirm("此操作将永久删除所有选中, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteSelectedMultiple(this.multipleSelection);

          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //删除数组
    handleDelete(index) {
      this.$confirm("此操作将永久删除这条信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // this.deleteList(index);
          // console.log(index);
          console.log(index);
          this.deleteIndexList(index);
          // this.tableData.splice(index, 1);
          // this.listAll(this.tableData);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });

      //   console.log(state.List);
    },
    // //改变弹窗标题
    // titleChange() {
    //   if (this.form.name == "") {
    //     this.dialogTitle = "添加用户";
    //   } else {
    //     this.dialogTitle = "编辑用户";
    //   }
    // },
    //编辑按钮
    handleEdit(index, row) {
      this.openDialogstate();
      // console.log(row);
      bus.$emit("msgRow", row);
      // this.editValue(row);
      // this.editForm(row);
      // console.log(this.value);
      this.editIndex(index);
      // this.index = index;
      // console.log(this.form.name);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.header {
  margin-bottom: 10px;
}
.btnLeft {
  float: left;
}
.searchLeft {
  float: left;
}
.btnRight {
  float: right;
}
.footer {
  margin-top: 10px;
}
.inputWidth {
  width: 370px;
}
.cascader {
  margin-right: 10px;
}
</style>
